<template>
	<div v-if="item">
		<image
			:src="item.attrs.src"
			mode="widthFix"
			:style="
				item.attrs.style +
				(item.attrs.width ? ';width:' + item.attrs.width : '') +
				(item.attrs.height ? 'height:' + item.attrs.height : '')
			"
			hover-class="hover-class"
			hover-stay-time="400"
			@click="previewImg(item.attrs.src)"
		/>
	</div>
</template>

<script>
	export default {
		props: {
			/**
			 * 内容
			 */
			item: {
				type: Object,
				default: null,
			},
			/**
			 * 是否允许预览
			 */
			preview: {
				type: Boolean,
				default: true,
			},
			/**
			 * 图片数组
			 */
			imgList: {
				type: Array,
				default: [],
			},
		},
		methods: {
			previewImg(src) {
				if (this.preview) {
					wx.previewImage({
						current: src,
						urls: this.imgList.length ? this.imgList : [src],
					});
				}
			},
		},
	};
</script>

<style lang="scss" scoped>
	image {
		width: 100%;
		display: block;
	}
</style>
